<!--  -->
<template>
  <a-modal
    @cancel="modalClose"
    :visible="forgetModalVisible.visible"
    layout="horizontal"
    width="460px"
    wrapClassName="login-modal"
    :footer="null"
  >
    <h2 class="base-color form-modal-title">重置密码</h2>
    <a-form-model
      ref="forgetForm"
      :model="forgetForm"
      :rules="rules"
      class="forget-form">
      <a-form-model-item prop="username">
        <a-input
          v-model="forgetForm.username"
          autocomplete="off"
          placeholder="手机号"
          @focus="clearValidate('forgetForm', 'username')"
        >
          <template slot="prefix">
            <div class="label-prefix">
              <YxpIcon type="iconlogin_icon_account" />
              <span>账号</span>
            </div>
          </template>
        </a-input>
      </a-form-model-item>
      <a-form-model-item prop="code">
        <a-input
          v-model="forgetForm.code"
          autocomplete="off"
          placeholder="验证码"
          @focus="clearValidate('forgetForm', 'code')"
        >
          <template slot="prefix">
            <div class="label-prefix">
              <YxpIcon type="iconregister_icon_yanzhengma1" />
              <span>验证码</span>
            </div>
          </template>
        </a-input>
        <a-button
          type="primary"
          shape="round"
          :disabled="disabled"
          @click="getVerifyCode"
          >{{ btnTitle }}</a-button
        >
      </a-form-model-item>
      <a-form-model-item prop="password">
        <input type="text" autocomplete="new-password" class="false-input"/>
        <input type="password" autocomplete="new-password" class="false-input"/>
        <a-input
          v-model="forgetForm.password"
          :type="passType"
          ref="Password"
          autocomplete="off"
          placeholder="密码(6至12位数字或字母)"
          @focus="clearValidate('forgetForm', 'password')"
        >
          <template slot="prefix">
            <div class="label-prefix">
              <YxpIcon type="iconlogin_icon_password"></YxpIcon>
              <span>密码</span>
            </div>
          </template>
        </a-input>
      </a-form-model-item>
      <a-form-model-item prop="repasswd">
        <a-input
          v-model="forgetForm.repasswd"
          :type="rePassType"
          ref="RePassword"
          autocomplete="off"
          placeholder="再次输入密码"
          @focus="clearValidate('forgetForm', 'repasswd')"
        >
          <template slot="prefix">
            <div class="label-prefix">
              <YxpIcon type="iconlogin_icon_password"></YxpIcon>
              <span>确认密码</span>
            </div>
          </template>
        </a-input>
      </a-form-model-item>
      <a-button
        type="primary"
        shape="round"
        size="large"
        block
        html-type="submit"
        @click="forgetSubmit"
      >
        重置密码
      </a-button>
    </a-form-model>
  </a-modal>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { sendSms, resetPasswd, teacherResetPasswd } from "@/services/home";
import { Input, Modal, FormModel } from "ant-design-vue";
import { validatePhone, validatePass } from "@/utils/form-validate";
export default {
  name: "forgetModal",
  components: {
    AInput: Input,
    AModal: Modal,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item
  },
  data() {
    return {
      passType:"text",
      rePassType: 'text',
      forgetForm: {
        username: "",
        password: "",
        repasswd: "",
        code: "",
      },
      rules: {
        username: [{ validator: validatePhone, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        code: { required: true, message: "请输入验证码" },
        repasswd: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请重新输入密码"));
              } else if (value !== this.forgetForm.password) {
                callback(new Error("两次密码输入不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      },
      disabled: false,
      btnTitle: "获取验证码"
    };
  },
  computed: {
    ...mapState({
      forgetModalVisible: state => state.forgetModalVisible
    })
  },
  watch: {},
  methods: {
    ...mapMutations(['setForgetModal', 'setLoginModal']),
    modalClose() {
      this.setForgetModal({visible: false});
    },
    forgetSubmit(e) {
      this.$refs.forgetForm.validate(async valid => {
        if (valid) {
          if (this.forgetModalVisible.type) {
            let res = await teacherResetPasswd({
              ...this.forgetForm
            });
            if (res.code === 1) {
              this.$message.success("重置密码成功");
              this.setForgetModal({visible: false});
            }
          } else {
            let res = await resetPasswd({
              ...this.forgetForm
            });
            if (res.code === 1) {
              this.$message.success("重置密码成功");
              this.setForgetModal({visible: false});
              this.setLoginModal(true);
            }
          }
        }
      });
    },
    getVerifyCode(e) {
      this.$refs.forgetForm.validateField(["username"], async valid => {
        if (!valid) {
          this.validateBtn();
          let code = await sendSms({
            username: this.forgetForm.username,
            type: 3
          });
          console.log(code);
        }
      });
    },
    validateBtn() {
      //倒计时
      let time = 60;
      this.disabled = true;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.disabled = false;
          this.btnTitle = "获取验证码";
        } else {
          this.btnTitle = time + "秒后重试";
          this.disabled = true;
          time--;
        }
      }, 1000);
    },
    clearValidate(form, filed) {
      this.$refs[form].clearValidate(filed);
      if (filed === 'password') {
        this.passType = 'password'
      } else if (filed === 'repasswd') {
        this.rePassType = 'password'
      }
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="less">
/* @import url(); 引入公共css类 */

.form-modal-title {
  font-size: 16px;
  font-weight: 700;
}
.forget-form {
  position: relative;
  overflow: hidden;
  .false-input {
    position: absolute;
    right: -1000px;
  }
  .label-prefix {
    width: 80px;
  }
}
</style>
